@font-clor: '#000';
@font-size: '32rpx';
page{
    font-size: @font-size;
}
.box {
    display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box; /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox; /* 混合版本语法: IE 10 */
    display: -webkit-flex; /* 新版本语法: Chrome 21+ */
    display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
}
.box-nowrap {
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}
.box-lr {
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
}
.box-cloumn{
    -moz-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}
.box-justify-center {
    -webkit-justify-content: center;
    -webkit-justify-content: center;
    justify-content: center;
}
.box-justify-start {
    -webkit-justify-content: start;
    -webkit-justify-content: start;
    justify-content: start;
}
.box-align-center{
    -moz-flex-direction: center;
    -webkit-flex-direction: center;
    align-items: center;
}
.border-raduis50{
    -webkit-border-radius: center;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background-color: #ccc;
}
.loginpage-container{
    &:extend(.box,.box-cloumn,.box-justify-center,.box-align-center);
    height: 100vh;
}
.page-center{
        height: 60%;
        &:extend(.box,.box-cloumn,.box-justify-start,.box-align-center);
}
.portrait-container {
    &:extend(.box,.border-raduis50);
    width: 400rpx;
    height: 400rpx;
    .portrait{
        width: 100%;
        height: 100%;
        &:extend(.border-raduis50);
    }
}

.login{
    &:extend(.box,.box-cloumn,.box-justify-center,.box-align-center);
    .wechat-login{
        margin: 40rpx 0;
    }
}
